<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style type="text/css">
  p{
      width: 800px;
      height: 100px;
      background-color: aqua;
  }
    div{
        width: 300px;
		height: 100px;
		background-color: green;
    }

    span{
        background-color: teal;

    }

    img{
        width: 300px;
        height: 300px;

    }
    input{
        width: 300px;
        height: 30px;
    }


    /* Display: inline			    将元素转化为行内元素
     Display：inline-block	    将元素转化行内块元素
  	Display: block				 将元素转化为块元素 */

    a{
			 	 width: 300px;
			 	 height: 300px;
			 	 background-color: red;
			 	 /*  display: inline-block;   */  
			 	 /* 将行内元素转化为行内块元素 */
			 	 display: block;
			 	 /* 将行内元素转化为块元素 */
			 }


			 div{
			 	 width: 300px;
			 	 height: 300px;
			 	 background-color: pink;
				 /* 将行内元素转化为行内元素  因为行内元素不能设置宽度与高度所以不起作用 */
			 	 display: inline;
			 }


    </style>

</head>
<body>
    <p>段落标签

        典型代表：
       div,p,li,h1...<br>

     特点：
 		☞元素自己独占一行显示（与宽度无关）<br>
 		☞可以设置宽度和高度<br>
  		☞当嵌套一个块级元素，子元素如果不设置宽度，那么该子元素的宽度为父元素的宽度。

    </p>
        <div>div标签
            <p>
                <span>块级元</span>
            </p>

        </div>
        <br>
        <br>
        
  

     <p>   <span>
            行标签
            行内元素
        典型代表:
              Span， a, font, strong...
         特点：<br>	
          ☞元素在一行上显示<br>
          ☞不能直接设置宽度和高度
        </span>
    </p>
      <strong>中国</strong>

        <a href="https://www.baidu.com">百度</a>


        <br>
        <br>
       <p> ３.3	行内块元素
    	 典型代表:
       Image,  input(表单控件)
       特点：<br>
 ☞ 元素在一行上显示<br>
 ☞ 可以设置宽度和高度

 <br>

</p>
<img src="D:\html\img\TIM图片20180116211527.jpg" alt="女孩">
<input type="text">
<input type="button" value="提交">


<br>
<br>
<br>

<!-- Display: inline			    将元素转化为行内元素
Display：inline-block	    将元素转化行内块元素
 Display: block				 将元素转化为块元素 -->


 <div></div>
<a href="#">百度</a>
<a href="#">google</a>





</body>
</html>